<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>题库组详情</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <el-button type="primary" @click="open">添加题库组</el-button>
        </el-button-group>
        <el-dialog title="修改题库组" :visible.sync="dialogFormVisible">
          <el-divider></el-divider>
          <el-form :model="form" id="form">
            <el-form-item label="题库组名称：" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table height="100%" class="text-center" :data="data" style="width: 100%;">
        <el-table-column label="ID" prop="ID"></el-table-column>
        <el-table-column label="题库组名称" prop="name"></el-table-column>
        <el-table-column fixed="right" label="操作" width="280" show-overflow-tooltip>
          <template slot="header">
            <input class="el-input__inner" v-model.lazy="search" placeholder="请输入内容" />
          </template>
          <template slot-scope="scope">
            <el-button class="position-relative">
              <router-link
                :to="{ name:'题库', params: { ID: scope.row.ID } }"
                class="stretched-link"
              >查看</router-link>
            </el-button>
            <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              style="margin-left:10px"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import adminContentFooter from "@/components/admin/admin-content-footer.vue";
import {
  asyncgetitembankgroup,
  asynccreateitembankgroup,
  asyncdelitembankgroup
} from "../../../plugins/api";
export default {
  name: "group",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pagesize: 20,
      search: "",
      dialogFormVisible: false,
      form: {
        ID: "",
        name: ""
      },
      formLabelWidth: "120px"
    };
  },
  computed: {
    data() {
      const { tableData, search } = this;
      return tableData.filter(data => {
        const arr = JSON.stringify(Object.values(data));
        return !search || arr.toLowerCase().includes(search.toLowerCase());
      });
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSearch(index) {
      this.$router.push("/group/detail/" + this.tableData[index].ID);
    },
    handleEdit(index, row) {
      this.form.ID = row.ID;
      this.form.name = row.name;
      this.dialogFormVisible = true;
    },
    async save() {
      this.dialogFormVisible = false;
      await asynccreateitembankgroup(this.form);
      this.$message({
        message: "修改成功",
        type: "success"
      });
      await this.start();
    },
    handleDelete(index, row) {
      asyncdelitembankgroup({ ID: row.ID })
        .then(() => {
          this.start();
          this.$message({
            message: "删除成功",
            type: "success"
          });
        })
        .catch(err => {
          this.$message({
            message: "删除失败",
            type: err
          });
        });
    },
    open() {
      this.$prompt("题库组名称", "添加题库组", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
        inputErrorMessage: "请填写正确题库组名称格式"
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你的题库组名称是: " + value
          });
          const obj = {};
          obj.name = value;
          asynccreateitembankgroup(obj)
            .then(() => {
              this.start();
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    start() {
      asyncgetitembankgroup()
        .then(data => {
          this.tableData = data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.start();
  },
  components: {
    adminContentFooter
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-card.is-always-shadow {
  margin: 12px 0;
}
.el-table {
  margin-bottom: 50px;
}
</style>
